<template>
  <div class="page-container">
    <div class="course-list">
      <div class="search-bar card">
        <el-input
          v-model="keyword"
          placeholder="搜索课程..."
          class="search-input"
          @keyup.enter="search"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-select v-model="category" placeholder="分类" class="category-select">
          <el-option v-for="cat in categories" :key="cat" :label="cat" :value="cat"/>
        </el-select>
        <el-button type="primary" @click="showAddDialog = true" class="add-button btn-primary">
          <el-icon><Plus /></el-icon>新增课程
        </el-button>
      </div>

      <el-row :gutter="20" class="course-grid">
        <el-col :span="8" v-for="course in filteredCourses" :key="course.id">
          <el-card 
            class="course-card card"
            shadow="hover"
            @click="goToDetail(course.id)"
          >
            <div class="course-image">
              <img :src="course.img" :alt="course.title">
              <div class="course-actions">
                <el-button size="small" @click.stop="editCourse(course)">
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-popconfirm title="确定删除吗？" @confirm="deleteCourse(course.id)">
                  <el-button size="small" type="danger" @click.stop>
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </el-popconfirm>
              </div>
            </div>
            <div class="course-content">
              <h3 class="page-title">{{ course.title }}</h3>
              <p class="course-desc">{{ course.desc }}</p>
              <div class="course-info">
                <span class="teacher">
                  <el-icon><User /></el-icon>
                  {{ course.teacher }}
                </span>
                <div class="tags">
                  <span 
                    v-for="tag in course.tags" 
                    :key="tag"
                    class="tag"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 新增/编辑课程弹窗 -->
      <el-dialog 
        :title="editId ? '编辑课程' : '新增课程'" 
        v-model="showAddDialog"
        width="500px"
        class="custom-dialog"
      >
        <el-form :model="form" label-width="80px">
          <el-form-item label="课程名称">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="form.desc" type="textarea" :rows="3" />
          </el-form-item>
          <el-form-item label="讲师">
            <el-input v-model="form.teacher" />
          </el-form-item>
          <el-form-item label="图片URL">
            <el-input v-model="form.img" />
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="form.tags" placeholder="用逗号分隔" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button type="primary" class="btn-primary" @click="saveCourse">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Search, Plus, Edit, Delete, User } from '@element-plus/icons-vue'

const router = useRouter()
const store = useStore()
const keyword = ref('')
const category = ref('')
const categories = ref(['全部', '前端开发', '后端开发', '人工智能', '设计'])
const showAddDialog = ref(false)
const form = ref({ title: '', desc: '', teacher: '', img: '', tags: '' })
const editId = ref(null)

onMounted(async () => {
  await store.dispatch('course/fetchCourseList')
})

const filteredCourses = computed(() => {
  const courses = store.getters['course/courseList']
  return courses.filter(c =>
    (!category.value || category.value === '全部' || c.tags.includes(category.value)) &&
    (!keyword.value || c.title.includes(keyword.value) || c.desc.includes(keyword.value))
  )
})

function search() {}

function saveCourse() {
  if (editId.value) {
    store.dispatch('course/updateCourse', { ...form.value, id: editId.value, tags: form.value.tags.split(',') })
  } else {
    store.dispatch('course/addCourse', { ...form.value, id: Date.now(), tags: form.value.tags.split(',') })
  }
  showAddDialog.value = false
  editId.value = null
  form.value = { title: '', desc: '', teacher: '', img: '', tags: '' }
}

function editCourse(course) {
  editId.value = course.id
  form.value = { ...course, tags: course.tags.join(',') }
  showAddDialog.value = true
}

function deleteCourse(id) {
  store.dispatch('course/deleteCourse', id)
}

function goToDetail(id) {
  router.push(`/course/${id}`)
}
</script>

<style scoped>
.course-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
}

.search-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
}

.search-input {
  width: 300px;
}

.search-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px var(--border-color) inset;
}

.search-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--primary-color) inset;
}

.category-select {
  width: 150px;
}

.course-grid {
  margin-top: 20px;
}

.course-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover .course-image img {
  transform: scale(1.05);
}

.course-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--transition-duration) ease;
}

.course-card:hover .course-actions {
  opacity: 1;
}

.course-content {
  padding: 20px;
}

.course-desc {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.teacher {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-light);
  font-size: 14px;
}

.teacher :deep(.el-icon) {
  color: var(--primary-color);
}

.tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

:deep(.custom-dialog) {
  border-radius: var(--border-radius);
  overflow: hidden;
}

:deep(.custom-dialog .el-dialog__header) {
  background: var(--primary-gradient);
  margin: 0;
  padding: 20px;
}

:deep(.custom-dialog .el-dialog__title) {
  color: white;
  font-weight: 600;
}

:deep(.custom-dialog .el-dialog__headerbtn .el-dialog__close) {
  color: white;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 30px 20px;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 20px;
  border-top: 1px solid var(--border-color);
}
</style> 